<!-- 1 定义组件模版 -->
<template>
    <div>
        css 详情


        <div>id:{{ params.id }}</div>

        <div>title:{{ params.title }}</div>

        <div>content:{{ params.content }}</div>



    </div>

</template>

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="detail">

import { ref, toRefs } from "vue";

//引入一个函数
import { useRoute } from 'vue-router'


const route = useRoute();

//获取的对象只执行一次，失去响应式
// const params = route.params;



const { params } = toRefs(route);
console.log("route", route);
console.log("params", params);






</script>

<!-- 3 定义样式 -->
<style scoped>
div {
    margin: 5px;
}
</style>